<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>江苏省沿海遥感反演平台</title>
  <link rel="stylesheet" href="../layui/css/layui.css" />
  <link rel="stylesheet" href="../stylesheets/header-and-footer.css" />

  <style>
    html {
      height: 100%;
    }

    body {
      min-height: 100%;
      background-color: #fff;
    }

    .login button {
      margin-top: 11px;
    }

    .login .nav-menu {
      display: none;
    }

    #main-container {
      /* height: 95%; */

      /* width: 85%; */
      margin: 0 auto;
      /* margin-top: 60px; */
    }

    /* .clearfix:before,
            .clearfix:after {
              display: table;
              content: '';
            }

            .clearfix:after {
              clear: both;
            } */

    #main-container .banner {
      position: relative;
      margin-bottom: 0.5em;
      background-color: bisque;
    }

    #main-container>.banner>.background {
      background-image: url(../images/banner.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      height: 92.8vh;
    }

    .banner .title {
      position: absolute;
      top: 32vh;
      left: 42vw;
      color: #ddd;
      font-weight: 700;
      font-size: 42px;
      z-index: 100;
    }

    .content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding: 120px 30px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .content .container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1170px;
    }

    .content .container h2 {
      width: 50%;
      margin-bottom: 90px;
    }

    .content .container ul {
      box-sizing: border-box;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: -10px;
      margin-left: -10px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: space-around;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .content .container li {
      height: 230px;
      width: 230px;
      padding: 50px 40px;
      border: 1px solid #f7f7f7;
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
      -webkit-transition: box-shadow 200ms ease;
      transition: box-shadow 200ms ease;
    }

    .content .container li h3 {
      margin-top: 0px;
      margin-bottom: 10px;
      font-family: 'Libre Franklin', sans-serif;
      color: #000;
      font-size: 16px;
      font-weight: 600;
    }

    .detail {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding: 120px 30px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: #fafafa;
    }

    .detail .container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1170px;
    }

    .detail .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }

    .detail .row .row-img {
      flex: 1;
      margin-right: 100px;
    }

    .detail .row-img img {
      display: inline-block;
      max-width: 100%;
    }

    .detail .row-text {
      flex: 1;
      padding: 20px 20px;
      border: 1px solid #f7f7f7;
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
      -webkit-transition: box-shadow 200ms ease;
      transition: box-shadow 200ms ease;
    }

    .detail .row-text h2 {
      margin-bottom: 25px;
    }

    .paragraph {
      font-family: 'IBM Plex Mono', sans-serif;
      color: #000;
      font-size: 14px;
      line-height: 24px;
      font-weight: 400;
    }

    @media only screen and (min-width: 1500px) {}
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="layui-row">
    <!-- logo -->
    <div class="layui-col-md4">
      <header class="">
        <div id="header-container">
          <a href="https://www.spaceclimateobservatory.org/">
            <img class="logo" src="../images/sco-logo.svg" alt="Space Climate Observatory (SCO)" />
            <span style="color: #fff; font-size: 1.2em; line-height: 8.2vh;">国际气候观测站</span>
          </a>
          <a href="http://cge.njtech.edu.cn/">
            <img class="logo" src="../images/logo.png" alt="南京工业大学测绘科学与技术学院" />
          </a>
          <!-- <span class="title">江苏省海洋反演平台</span> -->
        </div>
      </header>
    </div>

    <!-- 导航栏 -->
    <div class="layui-col-md7 head-bg">
      <ul class="layui-nav nav-menu" lay-filter="">
        <li class="layui-nav-item layui-this">
          <a href="./index.html">首页</a>
        </li>
        <li class="layui-nav-item">
          <a href="./introduction.html">项目概况</a>
        </li>
        <li class="layui-nav-item">
          <a href="./background.html">背景资料</a>
        </li>
        <li class="layui-nav-item">
          <a href="./data.html">成果展示</a>
          <dl class="layui-nav-child">
            <dd><a href="./data.html">数据专栏</a></dd>
            <dd><a href="./model-column/model.html">模型专栏</a></dd>
            <dd><a href="./showdata.html">算法专栏</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="./about.html">团队成员</a>
        </li>
        <li class="layui-nav-item">
          <a class="last" href="./contact.html">联系我们</a>
        </li>
      </ul>
    </div>
    <a href="../en-us/index.html">
      <button class="layui-btn layui-btn-primary switch-language">English</button>
    </a>
  </div>

  <!-- 主体 -->
  <div id="main-container">
    <div class="banner">
      <div class="background"></div>
      <a href="">
        <span class="title">江苏省沿海遥感反演平台</span>
      </a>
    </div>
    <div class="content">
      <div class="container">
        <h2>标题</h2>
        <ul class="feature-list">
          <li>
            <h3>标题1</h3>
            <p class="paragraph">内容</p>
          </li>
          <li>
            <h3>标题2</h3>
            <p class="paragraph">内容</p>
          </li>
          <li>
            <h3>标题3</h3>
            <p class="paragraph">内容</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="detail">
      <div class="container">
        <div class="row">
          <div class="row-img">
            <img src="../images/background2.jpg" alt="" />
          </div>
          <div class="row-text">
            <h2>标题</h2>
            <p class="paragraph">内容</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <footer>
    <div id="footer-container">
      <ul class="footer-info-ls">
        <li>
          <span class="layui-breadcrumb" lay-separator="|">
            <a href="./index.html">首页</a>
            <a href="./introduction.html">项目概况</a>
            <a href="./background.html">背景资料</a>
            <a href="./data.html">成果展示</a>
            <a href="./about.html">团队成员</a>
            <a href="./contact.html">联系我们</a>
          </span>
        </li>
        <li>
          地址：江苏省南京市浦口区浦珠南路30号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮编：211800&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：025-58139464
        </li>
        <li>
          <a href="http://cge.njtech.edu.cn/">版权所有 © 南京工业大学测绘科学与技术学院</a>
        </li>
        <li></li>
      </ul>
    </div>
  </footer>

  <script src="../layui/layui.js" type="application/javascript"></script>
  <script>
    layui.use('element', function () {
      var element = layui.element
    })

  </script>
</body>

</html>